<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户管理</title>
    <!--<link rel="stylesheet" href="../../layui/css/layui.css">-->
</head>
<body>
<div style="padding:10px;background-color: #F2F2F2;">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">系统管理/用户管理</div>
                <div class="layui-card-body">
                    <!--数据表格-->
                    <form class="layui-form">
                    <div class="layui-form-item" style="margin-left: 100px;">
                        <div class="layui-inline">
                            <label class="layui-form-label">用户名称</label>
                            <div class="layui-input-block">
                                <input type="text" name="user_name" lay-verify="user_name" autocomplete="off" placeholder="请输入角色名称" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">启用状态</label>
                            <div class="layui-input-block">
                                <select name="user_state">
                                    <option value="">请选择</option>
                                    <option value="2">停用</option>
                                    <option value="1">启用</option>
                                </select>
                            </div>
                        </div>
                        <button type="button" id="query" style="margin-left: 20px" class="layui-btn">查询</button>
                    </div>
                    </form>
                    <table class="layui-hide" id="emp_table" lay-filter="emp_table"></table>
                </div>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="add_employee">添加用户</button>
    </div>
</script>
<!--表格中操作：编辑、删除-->
<script type="text/html" id="operation">
    <a class="layui-btn layui-btn-xs" lay-event="emp_edit">编辑</a>
    <!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="freeze">删除</a>-->
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="emp_del">删除</a>
</script>
</body>
<script>
    layui.use(['table','form'], function(){
        var table = layui.table,
            form=layui.form;
        form.render("select");
        table.render({
            elem: '#emp_table'
            ,url:'/userQueryAll.do'
            ,toolbar: '#toolbarDemo'
            ,title: '用户管理'
            ,method:"post"
            ,totalRow: false
            ,cols: [[
                {field: 'user_account', title: '用户账号',sort: true,width:120, fixed: 'left'}
                ,{field: 'user_name', title: '用户名称',width:120}
                ,{field: 'role_name', title: '角色名称' ,width:140}
                ,{field: 'user_email', title: '邮箱' ,width:180}
                ,{field: 'in_time', title: '入职时间' ,width:120}
                ,{field: 'out_time', title: '离职时间' ,width:125}
                ,{field: 'lately_time', title: '最近登录时间' ,width:200}
                ,{field: 'state_name', title: '状态' ,width:80}
                ,{fixed: 'right', title:'操作', toolbar: '#operation', width:160}
            ]]
            ,page:{
                limits:[5,10,15,20]
            }
        });
        //查询
        $("#query").click(function () {
            var user_name=$("input[name=user_name]").val();
            var user_state=$("select[name=user_state]").val();
            table.reload('emp_table', {
                url: '/queryByNameAndState.do',
                method:"get"
                ,where: {user_name:user_name,user_state:user_state} //设定异步数据接口的额外参数
            });
        });

        //头工具栏事件
        table.on('toolbar(emp_table)', function(obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            switch (obj.event) {
                case 'add_employee':
                    var index=layer.open({
                        type: 2,
                        closeBtn: 2,
                        title: ['添加角色', 'font-size:13px;background-color: #23262E;color:white;text-algin:center'],
                        shade: [0.5, '#393D49'],
                        shadeClose: true,
                        area: ['800px', '520px'],
                        content: '../../pages/system/add_user.html',
                        end:function () {
                            table.reload('emp_table', {
                                where: {
                                    key: {
                                        time: new Date()
                                    }
                                }
                            }, 'data');
                        }
                    });
                    break;
            }
        });


        //监听行工具事件
        table.on('tool(emp_table)', function(obj){
            var data = obj.data;
            if(obj.event === 'emp_del'){
                layer.confirm('是否删除用户', {
                    btn: ['是的', '不要'] //可以无限个按钮
                }, function(index, layero){
                    $.ajax({
                        url:"/deleteUser.do",
                        type:"post",
                        data:{user_account:data.user_account},
                        success:function (res) {
                            if (res.code == 200) {
                                layer.msg(res.msg,{icon:1});
                                var second=1;
                                //定时器2秒后跳转
                                table.reload('emp_table', {
                                    where: {
                                        key: {
                                            time: new Date()
                                        }
                                    }
                                }, 'data');
                            }else if (res.code == 500) {
                                layer.msg(res.msg,{icon:5})
                            }else if (res.code == 502) {
                                layer.msg(res.msg,{icon:5})
                            }else if (res.code == 405){
                                layer.msg(res.msg,{icon:5});
                            }
                        }
                    });
                }, function(index){
                    //按钮【按钮二】的回调
                });
            } else if(obj.event==="freeze"){
                alert("冻结")
            } else if(obj.event === 'emp_edit'){
                var index=layer.open({
                    type: 2,
                    closeBtn: 2,
                    title: ['修改用户', 'font-size:13px;background-color: #23262E;color:white;text-algin:center'],
                    shade: [0.5, '#393D49'],
                    shadeClose:true,
                    area: ['800px', '520px'],
                    content: '../../pages/system/edit_user.html',
                    success: function(layero, index){
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        //数据回显
                        body.find('input[name=user_account]').val(data.user_account);
                        body.find('input[name=user_name]').val(data.user_name);
                        body.find('input[name=role_id]').val(data.role_id);
                        body.find('input[name=user_email]').val(data.user_email);
                        body.find('input[name=user_sex]').val(data.sex);
                        body.find('input[name=entry_time]').val(data.in_time);
                        body.find('select[name=role_id]').attr("value",data.role_id);
                        body.find('input[name=quit_time]').val(data.out_time);
                        body.find('input[name=user_stat]').val(data.user_stat);
                    }, end:function () {
                        table.reload('emp_table', {
                            where: {
                                key: {
                                    time: new Date()
                                }
                            }
                        }, 'data');
                    }
                });
            }
        });
    });
</script>
</html>